
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Delete Records CSS3 Animation Effects Demos</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
		<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
		<link rel="stylesheet" href="/css/animate.css" />
		<script src="/js/jquery.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
		<script>
			$(document).ready(function(){
				$(".stdelete").click(function(){
					var A=$(this).parent().parent();
					A.addClass("effectFlipOut");
					A.delay(500).fadeOut("slow",function(){
						$(this).remove();
					});
				});
				$(".stdeletex").click(function(){
					var A=$(this).parent().parent();
					A.addClass("effectHinge");
					A.delay(500).fadeOut("slow",function(){
						$(this).remove();
					});
				});
			});
		</script>
		<style>
			.effectFlipOut{
			animation:flipOutX 1s;
			-webkit-animation:flipOutX 1s; /* Safari and Chrome */
			}
			.effectHinge{
			animation:hinge 1s;
			-webkit-animation:hinge 1s; /* Safari and Chrome */
			}
			.effectSwing{
			animation:swing 1s infinite;
			-webkit-animation:swing 1s infinite; /* Safari and Chrome */
			}
			.effectTada{
			animation:tada 1s infinite;
			-webkit-animation:tada 1s infinite; /* Safari and Chrome */
			}
			.effectLocation{
			animation:bounce 1s infinite;
			-webkit-animation:bounce 1s infinite; /* Safari and Chrome */
			}
			.effectSwing{
			animation:swing 1s infinite;
			-webkit-animation:swing 1s infinite; /* Safari and Chrome */
			}
			#container{ margin:0 auto; width:600px; }
			.stbody{ min-height:50px; border-bottom:dashed 1px #006699; background-color:#f2f2f2; padding:5px; }
			.stimg{ float:left; height:50px; width:50px; border:solid 1px #dedede; padding:2px; }
			.sttext{
				margin-left:70px; min-height:50px;
				word-wrap:break-word; overflow:hidden; padding:5px; display:block;
				font-family:'Georgia', Times New Roman, Times, serif
			}
			.sttime{ font-size:11px; color:#999; font-family:Arial, Helvetica, sans-serif; margin-top:5px; }
			.stimg img{ width:50px;height:50px }
			.stdelete, .stdeletex{ float:right; cursor:pointer; font-family:arial; }
			td { text-align:center; }
		</style>
	</head>

	<body>
		<div id='container'>
			<h1>CSS3 Animation Effects Demos</h1>

			<h2>Hinge Effect</h2>

			<div class="stbody" tal:repeat="remove removes">
				<div class="stimg">
					<img src="${remove/image}" />
				</div>
				<div class="sttext">
					<span class="stdeletex" title="Delete">X</span>
					<span tal:content="remove/text"></span>
					<div class="sttime" tal:content="remove/id"></div>
				</div>
			</div>

			<h2>FlipOut Effect</h2>
			<div class="stbody" tal:repeat="remove removes">
				<div class="stimg">
					<img src="${remove/image}" />
				</div>
				<div class="sttext">
					<span class="stdelete" title="Delete">X</span>
					<span tal:content="remove/text"></span>
					<div class="sttime" tal:content="remove/id"></div>
				</div>
			</div>
		</div>
	</body>
</html>
